<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
    ref="page_body"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >报名审核</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="audit_list_content" ref="audit_list_content">
        <el-row>
          <el-col :span="6">
            <div class="padding_box padding_box_left">
              <el-input
                size="mini"
                placeholder="输入关键字"
                v-model="filterText"
                style="margin-bottom: 10px"
              >
              </el-input>
              <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                :default-checked-keys="defaultCheckedKeys"
                :default-expanded-keys="defaultCheckedKeys"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="id"
                :render-content="renderContent"
                show-checkbox
                :check-on-click-node="true"
                :check-strictly="true"
                @check="nodeClick"
              >
              </el-tree>
            </div>
          </el-col>

          <el-col :span="18">
            <div class="padding_box">
              <!-- 搜索框 -->
              <el-row style="margin-bottom: 10px">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input
                    v-model="auditSearchKey"
                    placeholder="请输入关键词"
                    size="max"
                    style="width: 200px; margin-left: 0px"
                  ></el-input>
                  <el-form label-width="80px">
                    <el-form-item label="部门" label-width="50px">
                      <el-select
                        v-model="areaLisstLIN"
                        placeholder="请选择"
                        @change="arert"
                        clearable
                      >
                        <el-option
                          ref="trs"
                          v-for="item in area"
                          :key="item.department_id"
                          :label="item.department_name"
                          :value="item.department_id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="单位" label-width="50px">
                      <el-select
                        v-model="arelisr"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in ares"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="制证状态">
                      <el-select
                        v-model="shenhe"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in shenhelist"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>

                  <!-- <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="searchFn()"
                    >搜索</el-button
                  > -->
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-form label-width="80px">
                    <el-form-item label="审核状态">
                      <el-select
                        v-model="shenhshenhe"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in shenlist"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="有无照片">
                      <el-select
                        v-model="is_exist_photo"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in pohen"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="证件类型">
                      <el-select v-model="pass" clearable placeholder="请选择">
                        <el-option
                          v-for="item in passList"
                          :key="item.id"
                          :label="item.pass_name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="发放状态">
                      <el-select
                        v-model="issuessd"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in issue_status"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>

                  <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="searchFn()"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 10px">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-button
                    v-if="this.typeid == '0'"
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="addFn()"
                    >新增免审核</el-button
                  >
                  <el-button
                    v-if="this.typeid == '0'"
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="addaccreditation('2')"
                    >批量制证</el-button
                  >
                  <el-button
                    v-if="this.typeid == '0'"
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="changeBatchIssueStatus()"
                    >发放状态</el-button
                  >
                  <el-button
                    v-if="this.typeid == '0'"
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="addsyESTaccre()"
                    >上传制证状态</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 10px"
                    :loading="downloadBtnLoading"
                    @click="exportFn()"
                    >{{ downloadBtnText }}</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 10px"
                    :loading="downloadBtnLoadingpuss"
                    @click="exportFnpuss()"
                    >{{ downloadBtnTextpuss }}</el-button
                  >
                </el-col>
              </el-row>
              <!-- 数据列表 -->
              <div
                v-if="auditListData != undefined && auditListData.length > 0"
              >
                <el-row>
                  <el-col :span="24">
                    <el-table
                      :data="auditListData"
                      border
                      size="mini"
                      :cell-style="cellStyleFn"
                      @selection-change="handleSelectionChange"
                      style="width: 100%"
                    >
                      <el-table-column type="selection" width="55">
                      </el-table-column>

                      <el-table-column label="照片" width="100" align="center">
                        <template slot-scope="scope">
                          <img
                            @click="imgViewFn(scope.$index, scope.row)"
                            :src="scope.row.photo"
                            class="table_img"
                          />
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="name"
                        label="姓名"
                        width="100"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="company"
                        label="单位"
                        min-width="120"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="department_name"
                        label="部门"
                        min-width="100"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="pass_name"
                        label="证件种类"
                        min-width="100"
                        align="center"
                      >
                      </el-table-column>

                      <el-table-column min-width="160" align="center">
                        <template slot="header">
                          <div class="table_header_box">
                            <div style="margin-right: 5px">权限区域</div>
                            <i
                              @click="openAreaTips()"
                              style="cursor: pointer"
                              class="el-icon-info"
                            ></i>
                          </div>
                        </template>
                        <template slot-scope="scope">
                          <div class="tag_box">
                            <el-popover
                              v-for="(areaItem, index) in formatterAreaFn(
                                scope.row.origin__area_id
                              )"
                              :key="index"
                              placement="top-start"
                              width="200"
                              trigger="hover"
                              :content="areaItem.area_name"
                            >
                              <template #reference>
                                <img
                                  :src="areaItem.area_icon"
                                  slot="reference"
                                  class="area_icon"
                                />
                              </template>
                            </el-popover>
                          </div>
                          <div class="tag_box">
                            <el-popover
                              v-for="(areaItem, index) in formaAreaFn(
                                scope.row.add__area_id
                              )"
                              :key="index"
                              placement="bottom"
                              width="200"
                              trigger="hover"
                              :content="areaItem.area_name"
                            >
                              <template #reference>
                                <img
                                  :src="areaItem.area_icon"
                                  slot="reference"
                                  class="area_icon"
                                />
                                <p class="lings">+</p>
                              </template>
                            </el-popover>

                            <!-- <img :src="areaItem.area_icon" class="area_icon" /> -->
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="status_text"
                        label="审核状态"
                        min-width="120"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="is_used"
                        label="导出状态"
                        min-width="120"
                        align="center"
                        :formatter="formatterStatusFnss"
                      ></el-table-column>
                      <el-table-column
                        prop="production_status_text"
                        label="制证状态"
                        min-width="120"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="issue_status"
                        label="发放状态"
                        min-width="120"
                        align="center"
                        :formatter="formatterissue_status"
                      ></el-table-column>

                      <!--  :formatter="formatterStatusFn"-->
                      <el-table-column
                        label="操作"
                        min-width="220px"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary"
                            @click="auditDetailFn(scope.$index, scope.row)"
                          >
                            查看
                          </el-button>
                          <el-button
                            size="mini"
                            type="primary"
                            @click="accreditation(scope.$index, scope.row, '1')"
                          >
                            制证
                          </el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            @click="enrollDeleteFn(scope.$index, scope.row)"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="audit_list_pagination">
                      <el-pagination
                        @size-change="auditListSizeChange"
                        @current-change="auditListCurrentChange"
                        :current-page="auditCurrentPage"
                        :page-sizes="auditPageSizes"
                        :page-size="auditPageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="auditTotal"
                      >
                      </el-pagination>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row v-else>
                <el-empty description="暂无数据"></el-empty>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>

    <el-dialog
      title="提示"
      :visible.sync="tipsDialogVisible"
      :close-on-click-modal="true"
      width="400px"
    >
      <div class="area_tips_list">
        <div class="area_tips_list_top">
          权限区域图标锁对应权限区域名称如下所示:
        </div>
        <div
          class="area_tips_list_item"
          v-for="(item, index) in areaList"
          :key="index"
        >
          <img class="area_icon" :src="item.area_icon" />
          <div class="area_tips_list_name">{{ item.area_name }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 照片预览弹窗 -->
    <el-dialog
      :visible.sync="imgDialogVisible"
      :close-on-click-modal="true"
      width="500px"
    >
      <img :src="dialogImg" class="dialog_img" />
    </el-dialog>
    <div id="dialoh">
      <el-dialog :title="titleis" :visible.sync="setrp" width="30%">
        <div class="but">
          <el-radio-group v-model="radio">
            <el-form>
              <el-form-item label="制证状态：" :label-width="formLabelWidth">
                <el-radio label="0" border>未制证 </el-radio>
                <el-radio label="1" border>制证中 </el-radio>
                <el-radio label="2" border>制证完成</el-radio>
              </el-form-item>
            </el-form>
          </el-radio-group>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao">取 消</el-button>
          <el-button type="primary" @click="setok">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div id="dialoh">
      <el-dialog title="批量修改" :visible.sync="chIssueStatus" width="30%">
        <div class="but">
          <el-radio-group v-model="Statusradio">
            <el-form>
              <el-form-item label="发放状态：" :label-width="formLabelWidth">
                <el-radio label="1" border>已发放 </el-radio>
                <el-radio label="2" border>未发放</el-radio>
              </el-form-item>
            </el-form>
          </el-radio-group>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiaos">取 消</el-button>
          <el-button type="primary" @click="qudinsetok">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style src="../../assets/css/audit/auditAllList.css" scoped></style>

<script>
import addbatch from "../enroll/addbatch.vue";
import { saveAs } from "file-saver";
import JSZip from "jszip";
export default {
  name: "AuditAllList",
  components: {
    addbatch,
  },
  data() {
    return {
      setrp: false,
      chIssueStatus: false,
      typeid: "", //身份判断
      userType: this.$store.state.loginUserType == "ADMINLOGINUSERCH" ? 0 : 1, // 用户类型;1. 普通; 0. 超级;
      baseAPIUrl: this.$store.state.baseAPIUrl,
      loadingKey: false,
      shomee: false,
      loadingText: "",
      matchId: "", // 赛事名称id
      statusList: [
        {
          key: 1,
          value: "已导出",
        },
        {
          key: 2,
          value: "未导出",
        },
      ], // 审核状态字典
      shenhe: "",
      shenhelist: [
        {
          key: 0,
          value: "未制证",
        },
        {
          key: 1,
          value: "制证中",
        },
        {
          key: 2,
          value: "制证完成",
        },
      ],
      issue_status: [
        {
          key: 1,
          value: "已发放 ",
        },
        {
          key: 2,
          value: "未发放",
        },
      ],
      issuessd: "",
      shenlist: [], //审核状态
      shenhshenhe: "",
      pohen: [
        {
          key: 1,
          value: "全部",
        },
        {
          key: 2,
          value: "有照片",
        },
        {
          key: 3,
          value: "无照片",
        },
      ],
      is_exist_photo: "",
      auditListData: [], // 数据列表--审核列表
      passList: [], //证件类型
      pass: "",
      auditCurrentPage: 1, // 当前页--审核列表
      auditPageSizes: [20, 50, 100, 200, 500], // 可选页容量--审核列表
      auditPageSize: 20, // 当前页容量--审核列表
      auditTotal: 0, // 总条数--审核列表
      auditSearchKey: "", // 搜索关键词--审核列表
      dialogTitle: "", // 弹窗标题
      dialogVisible: false, // 弹窗显示
      downloadBtnLoading: false,
      downloadBtnLoadingpuss: false,
      dialogBtnKey: 1, // 审核弹窗控制 1. 单条审核; 2. 批量审核
      detailFormData: {
        id: "",
        auditAreaList: [], // 权限区域
        remark: "", // 备注
      }, // 部门弹窗数据

      detailFormRules: {
        // auditAreaList: [
        //   { required: true, message: "请勾选权限区域", trigger: "change" },
        // ],
      },
      //二级联动数据
      areaLisstLIN: "",
      areaccname: "",
      arelisr: "",
      area: [],
      ares: [],
      formLabelWidth: "100px",
      areaList: [], // 权限区域列表
      matchList: [], // 赛事名称列表
      tableSelect: [], // 审核列表勾选
      filterText: "", // 树数据筛选
      defaultProps: {
        children: "children",
        label: "label",
      }, // 树配置
      treeData: [], // 树数据
      companyKey: "", // 筛选--公司
      defaultCheckedKeys: [],
      selectedTreeKey: "", // 被选择节点
      tipsDialogVisible: false, // 权限区域提示显示
      imgDialogVisible: false, // 照片预览
      downloadBtnText: "导出名单和照片",
      downloadBtnTextpuss: "导出名单",
      dialogImg: "",
      count: "",
      matchListDatass: [],
      role: "",

      titleis: "",
      idse: "",
      radio: "0",
      identifying: "",
      Statusradio: "0",
    };
  },
  created: function () {
    this.getmatchListDataFn();
    this.typeid = localStorage.getItem("type");
    console.log(this.typeid);
    console.log(this.areaList);
  },
  methods: {
    //审核状态数组
    shenhezuangtai() {
      let that = this;
      let url = "/admin/apply/progressStatusList";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.shenlist = response.list;
            console.log(this.shenlist);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 赛事名称选择筛选
    matchSearchFn: function (val) {
      this.matchId = val;
      this.auditCurrentPage = 1;
      this.getAreaListDataFn();
      this.getAuditListDataFn();
      this.getDepCompanyList();
      this.shenhezuangtai();
      this.passindex();
    },
    // 搜索按钮
    searchFn: function (key) {
      this.auditCurrentPage = 1;

      this.getAuditListDataFn();
    },
    // 报名列表--删除
    enrollDeleteFn: function (index, row) {
      console.log(row);
      let that = this;
      let url = "/admin/apply/destroy";
      let data = {
        id: row.id,
      };

      this.$confirm("是否导删除该报名?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.auditCurrentPage - 1;
              if (that.auditListData.length == 1) {
                that.auditCurrentPage = next >= 1 ? next : 1;
              }
              that.getAuditListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },

    // 获取权限区域列表数据
    getAreaListDataFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.areaList = response.list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取赛事名称列表数据
    getmatchListDataFn: function () {
      let that = this;
      let url = "/admin/apply/getEventCompanyListFour";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let treeListData = [];
            that.treeData = response.event_company;
            // console.log(response);

            response.event_company.forEach((item) => {
              let oneObj = {
                id: item.id,
                label: item.title,
                isFather: 1,
                count: item.total_count,
                selected: false,
                children: [],
              };
              if (oneObj.id == this.$route.query.matchId) {
                oneObj.selected = true;
                this.matchId = oneObj.id;
              }

              let list = item.company;
              console.log(list);
              let key = 0;
              list.forEach((k) => {
                let obj = {
                  id: item.id + "" + key,
                  label: k.company_name,
                  isFather: 2,
                  fatherId: item.id,
                  count: k.count,
                  selected: false,
                };
                if (obj.label == this.$route.query.companyKey) {
                  obj.selected = true;
                  this.companyKey = obj.label;
                }
                oneObj.children.push(obj);

                key++;
              });
              treeListData.push(oneObj);
            });
            that.treeData = treeListData;
            this.defaultCheckedKeys = this.treeData.flatMap((node) => {
              let temp = [];
              if (node.selected) {
                temp.push(node.id);
                if (node.children) {
                  node.children.flatMap((child) => {
                    if (child.selected) {
                      temp.push(child.id);
                    }
                  });
                }
                return temp;
              } else {
                return [];
              }
            });
            this.getAreaListDataFn();
            this.getDepCompanyList();
            this.passindex();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },

    // 获取审核列表数据
    getAuditListDataFn: function () {
      let that = this;
      let url = "/admin/apply/auditFinishList";
      let data = {
        event_id: this.matchId,
        page: this.auditCurrentPage,
        perPage: this.auditPageSize,
        keywords: this.auditSearchKey,
        company: this.companyKey,
        department_id: this.areaLisstLIN,
        company_two: this.arelisr,
        production_status: this.shenhe,
        status: this.shenhshenhe,
        is_exist_photo: this.is_exist_photo,
        pass_id: this.pass,
        issue_status: this.issuessd,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.auditListData = response.list;
            that.auditTotal = response.total_count;
            that.role = response.role;
            console.log(this.role);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 审核列表页容量改变
    auditListSizeChange: function (val) {
      this.auditCurrentPage = 1;
      this.auditPageSize = val;
      this.getAuditListDataFn();
    },
    // 审核列表当前页改变
    auditListCurrentChange: function (val) {
      this.auditCurrentPage = val;
      this.getAuditListDataFn();
    },
    // 列表勾选
    handleSelectionChange: function (val) {
      this.tableSelect = val;

      console.log(this.tableSelect);
    },
    // 审核状态格式化
    // formatterStatusFn: function (row) {
    //   let production_status = row.production_status;
    //   let text = "";
    //   this.statusList.forEach(function (item) {
    //     if (item.key == production_status) {
    //       text = item.value;
    //     }
    //   });
    //   return text;
    // },
    // 导出状态
    formatterStatusFnss: function (row) {
      let is_used = row.is_used;
      let text = "";
      this.statusList.forEach(function (item) {
        if (item.key == is_used) {
          text = item.value;
        }
      });
      return text;
    },
    // 导出状态
    formatterissue_status: function (row) {
      let is_used = row.issue_status;
      let text = "";
      this.issue_status.forEach(function (item) {
        if (item.key == is_used) {
          text = item.value;
        }
      });
      return text;
    },

    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 6) {
        if (row.status != 2) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    gobancklist() {
      let that = this;
      let url = "";
      let data = {
        remark: that.detailFormData.remark,
        operate: 4,
      };
      if (this.dialogBtnKey == 1) {
        url = "/admin/apply/audit";
        data.area_ids = that.detailFormData.auditAreaList.join(",");
        data.apply_id = that.detailFormData.id;
      } else {
        url = "/admin/apply/auditBatch";
        data.apply_ids = that.detailFormData.id;
      }

      this.$refs.dialogDetailForm.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.$confirm("确认移入黑名单?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }).then(() => {
            that.loadingText = "处理中...";
            that.loadingKey = true;
            that.axios
              .post(url, data)
              .then((response) => {
                that.loadingKey = false;
                if (response.code == 0) {
                  that.$message.success("操作成功");
                  that.dialogclose();
                  that.getmatchListDataFn();
                  that.getAuditListDataFn();
                } else {
                  that.$message.error(response.msg);
                }
              })
              .catch(function (error) {
                that.loadingKey = false;
                console.log(error);
              });
          });
        }
      });
    },
    quxiao() {
      this.setrp = false;
    },
    quxiaos() {
      this.chIssueStatus = false;
    },
    //制证修改
    accreditation(index, row, identifying) {
      this.identifying = identifying;
      this.radio = row.production_status.toString();
      this.titleis = "制证设置";
      this.ids = row.id;
      this.setrp = true;
    },
    addaccreditation(identifying) {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        this.titleis = "批量制证";
        this.identifying = identifying;
        console.log(this.identifying);
        this.setrp = true;
      }
    },
    setok() {
      if (this.identifying == "1") {
        let url = "/admin/apply/changeProductionStatus";
        let data = {
          event_id: this.matchId,
          id: this.ids,
          production_status: this.radio,
        };
        this.axios.post(url, data).then((res) => {
          if (res.code == 0) {
            this.setrp = false;
            this.getAuditListDataFn();
          }
        });
      } else if (this.identifying == "2") {
        let arr = [];
        this.tableSelect.forEach((item) => {
          arr.push(item.id);
        });

        let url = "/admin/apply/changeBatchProductionStatus";
        let data = {
          event_id: this.matchId,
          ids: arr,
          production_status: this.radio,
        };
        this.axios.post(url, data).then((res) => {
          if (res.code == 0) {
            this.setrp = false;
            this.getAuditListDataFn();
          }
        });
      }
    },
    // 批量上传制证状态
    addsyESTaccre: function () {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        let arr = [];
        this.tableSelect.forEach((item) => {
          arr.push(item.id);
        });
        let that = this;
        let url = "/admin/apply/uploadJussCardStatus";
        let data = {
          event_id: this.matchId,
          ids: arr,
        };

        this.$confirm("是否上传该制证状态?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          that.loadingText = "处理中...";
          that.loadingKey = true;
          that.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                that.$message.success(response.msg);

                that.getAuditListDataFn();
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        });
      }
    },
    // 审核列表--查看
    auditDetailFn: function (index, row) {
      console.log("22");
      const routeUrl = this.$router.resolve({
        name: "certificationdlist",
      });
      window.open(
        routeUrl.href + "?id=" + row.id + "&key=2&header=2",
        "_blank"
      );

      // sessionStorage.setItem("even_id", this.matchId);
      // sessionStorage.setItem("companyKey", this.companyKey);
      // const routeUrl = this.$router.resolve({
      //   name: "AuditDetail",
      // });

      // window.open(
      //   routeUrl.href + "?id=" + row.id + "&key=3&header=1" + "_blank"
      // );
    },
    // 查看图片
    imgViewFn: function (index, row) {
      this.imgDialogVisible = true;
      this.dialogImg = row.photo;
    },
    // 关闭弹窗
    dialogclose: function () {
      this.dialogVisible = false;
    },

    // 权限区域格式化
    formatterAreaFn: function (val) {
      let that = this;
      let list = val.split(",");
      // console.log(list);
      let imgList = [];

      list.forEach((k) => {
        that.areaList.forEach((item) => {
          if (k == item.id) {
            imgList.push(item);
          }
        });
      });

      return imgList;
    },
    formaAreaFn(val) {
      let that = this;
      let list = val.split(",");
      let imgList = [];
      list.forEach((k) => {
        that.areaList.forEach((item) => {
          // console.log(that.areaList);
          if (k == item.id) {
            imgList.push(item);
            // console.log(imgList);
          }
        });
      });

      return imgList;
    },
    // 树节点筛选
    filterNode: function (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 自定义节点
    renderContent: function (h, { node, data, store }) {
      let that = this;
      return (
        <span class="custom_tree_node" ref={"node_" + data.id}>
          <span>{data.label + "(" + data.count + ")"}</span>
        </span>
      );
    },
    // 选择节点
    nodeClick: function (data, list) {
      if (data.isFather == 1) {
        this.companyKey = "";
        this.matchSearchFn(data.id);
      } else {
        this.companyKey = data.label;
        console.log("22222");
        this.matchId = data.fatherId;
        this.auditCurrentPage = 1;
        // this.getAuditList();
        this.getAreaListDataFn();
        this.getDepCompanyList();
        this.getAuditListDataFn();
        this.passindex();
      }
      this.selectedTreeKey = data.id;
      this.defaultCheckedKeys = [];
      this.defaultCheckedKeys.push(data.id);
      console.log(this.defaultCheckedKeys);
      if (list.checkedKeys.length == 2) {
        this.$refs.tree.setCheckedKeys([data.id]);
      }
    },
    // 打开权限区域 提示
    openAreaTips: function () {
      this.tipsDialogVisible = true;
    },
    arert() {
      this.arelisr = "";
    },
    //部门列表筛选
    getDepCompanyList() {
      let that = this;
      let url = "/admin/apply/getDepCompanyList";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.area = response.dep;
            this.area.forEach((item) => {
              if (this.areaLisstLIN == item.department_id) {
                this.ares = item.companys;
              }
              if (item.department_id == this.$route.query.department_id) {
                this.areaLisstLIN = item.department_id;
              }
            });
            // this.area.forEach((item) => {
            //   if (item.department_id == this.$route.query.department_id) {
            //     this.areaLisstLIN = item.department_id;
            //   }
            // });
            console.log(response);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    cwlst() {
      let that = this;
      let url = "/admin/apply/errorIndex";
      let data = {
        type: "1",
        page: this.auditCurrentPage,
        perPage: this.auditPageSize,
        keywords: this.auditSearchKey,
      };

      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.matchListDatass = res.errorlog;
            this.auditTotal = res.total_count;
          } else {
            that.$message.error(res.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // cwuBatch() {
    //   this.cwlst();
    //   this.shomee = true;
    // },
    // // 错误日志审核列表页容量改变
    // cwaudiSizeChange: function (val) {
    //   this.auditCurrentPage = 1;
    //   this.auditPageSize = val;
    // },
    // // 错误日志审核列表当前页改变
    // cwauditListCu: function (val) {
    //   this.auditCurrentPage = val;
    //   // this.getAuditListDataFn();
    // },
    // 新增报名
    addFn: function () {
      let that = this;
      if (that.matchId == "" || that.matchId == null) {
        that.$message.error("请先选择赛事名称");
      } else {
        this.$router.push({
          name: "AddEnroll",
          query: {
            id: that.matchId,
          },
        });
      }
    },
    //批量修改发放状态
    changeBatchIssueStatus() {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        this.chIssueStatus = true;
      }
    },
    qudinsetok() {
      let arr = [];
      this.tableSelect.forEach((item) => {
        arr.push(item.id);
      });
      let that = this;
      let url = "/admin/apply/changeBatchIssueStatus";
      let data = {
        event_id: this.matchId,
        ids: arr,
        issue_status: this.Statusradio,
      };

      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.chIssueStatus = false;
            this.getAuditListDataFn();
          } else {
            that.$message.error(res.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //筛选证件
    passindex() {
      let that = this;
      let url = "/admin/pass/index";
      let data = {
        event_id: this.matchId,
      };

      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            that.passList = res.list;
          } else {
            that.$message.error(res.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 导出名单和照片
    exportFn: function () {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        let that = this;
        let all = [];
        this.tableSelect.forEach((item) => {
          all.push(item.id);
        });
        let url = "/excel/exportApply";
        let data = {
          event_id: that.matchId,
          company: this.companyKey,
          department_id: this.areaLisstLIN,
          company_two: this.arelisr,
          keywords: this.auditSearchKey,
          production_status: this.shenhe,
          status: this.shenhshenhe,
          is_exist_photo: this.is_exist_photo,
          apply_ids: all.join(),
          pass_id: this.pass,
          issue_status: this.issuessd,
        };

        this.$confirm("是否导出名单数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          that.downloadBtnLoading = true;
          that.downloadBtnText = "下载中...";
          that.axios
            .post(url, data, { responseType: "blob" })
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 1) {
                that.downloadBtnLoading = false;
                that.downloadBtnText = "导出名单和照片";
                that.$message.error(response.msg);
              } else {
                let blob = new Blob([response], {
                  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
                });
                // const link = document.createElement("a");
                // 这里是将链接地址url转成blob地址，
                // link.href = URL.createObjectURL(blob);
                // // 下载文件的名称及文件类型后缀
                // link.download = "报名名单.xlsx";
                // document.body.appendChild(link);
                // link.click();
                // // 在资源下载完成后 清除 占用的缓存资源
                // window.URL.revokeObjectURL(link.href);
                // document.body.removeChild(link);
                that
                  .getImgUrlListFn()
                  .then((res) => {
                    if (res) {
                      that.downloadZip(res, blob);
                    }
                  })
                  .catch((err) => {
                    that.$message.error("网络繁忙,请稍后重试");
                  });
              }
            })
            .catch(function (error) {
              that.downloadBtnLoading = false;
              that.downloadBtnText = "导出名单和照片";
              console.log(error);
            });
        });
      }
    },
    // 获取下载照片链接
    getImgUrlListFn: function () {
      let that = this;
      let data = {};
      let all = [];
      this.tableSelect.forEach((item) => {
        all.push(item.id);
      });
      data = {
        event_id: that.matchId,
        company: this.companyKey,
        department_id: this.areaLisstLIN,
        company_two: this.arelisr,
        keywords: this.auditSearchKey,
        production_status: this.shenhe,
        is_exist_photo: this.is_exist_photo,
        apply_ids: all.join(),
        pass_id: this.pass,
        issue_status: this.issuessd,
      };
      let url = "/admin/apply/exportApplyPhoto";
      return new Promise(function (resolve, reject) {
        that.axios
          .post(url, data)
          .then((response) => {
            if (response.code == 0) {
              let list = response.list;
              resolve(list);
            } else {
              that.$message.error(response.msg);
              resolve(false);
            }
          })
          .catch(function (error) {
            reject(error);
          });
      });
    },
    // 下载
    downloadFileFn: function (url) {
      return new Promise((resolve, reject) => {
        fetch(url, {
          mode: "cors",
        })
          .then((res) => res.blob())
          .then((blob) => {
            resolve(blob);
          })
          .catch((error) => {
            that.$message.error("网络错误");
            reject(error.toString());
          });
      });
    },
    // 下载打包
    downloadZip: function (list, excel) {
      let that = this;
      let upList = [];
      let imgList = list;
      const zip = new JSZip();
      const promises = [];

      zip.file("报名名单.xlsx", excel);

      imgList.forEach(function (item) {
        if (
          item.local_photo != null &&
          item.local_photo != "" &&
          item.local_photo != undefined
        ) {
          const typeIndex = item.local_photo.indexOf(".");
          let fileType = item.local_photo.slice(
            typeIndex,
            item.local_photo.length
          );
          let name = item.name + fileType;
          console.log(name);
          upList.push(item);
          const promise = that
            .downloadFileFn(that.baseAPIUrl + "/" + item.local_photo)
            .then((data) => {
              let cil = 0;
              that.downloadNow++;
              cil = Math.floor((that.downloadNow / that.downloadMax) * 100);
              that.downloadBtnText = "下载中 " + cil + "%";
              zip.file(name, data);
            })
            .catch((error) => {
              that.$message.error("网络错误");
            });
          promises.push(promise);
        }
      });
      that.downloadMax = upList.length + 1;
      that.downloadNow = 0;
      Promise.all(promises).then(() => {
        zip
          .generateAsync({
            type: "blob",
          })
          .then((content) => {
            saveAs(content, "报名名单.zip");
            this.downloadBtnLoading = false;
            this.downloadBtnText = "导出名单";
          })
          .catch((error) => {
            that.$message.error("网络错误");
          });
      });
    },
    // 导出名单
    exportFnpuss: function () {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        let all = [];
        this.tableSelect.forEach((item) => {
          all.push(item.id);
        });
        let that = this;
        let url = "/excel/exportApply";
        let data = {
          event_id: that.matchId,
          company: this.companyKey,
          department_id: this.areaLisstLIN,
          company_two: this.arelisr,
          keywords: this.auditSearchKey,
          status: this.shenhe,
          is_exist_photo: this.is_exist_photo,
          pass_id: this.pass,
          apply_ids: all.join(),
          issue_status: this.issuessd,
        };

        this.$confirm("是否导出名单数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          that.downloadBtnLoadingpuss = true;
          that.downloadBtnTextpuss = "下载中...";
          that.axios
            .post(url, data, { responseType: "blob" })
            .then((response) => {
              that.loadingKey = false;
              console.log(response);
              if (response.code == 1) {
                that.downloadBtnLoadingpuss = false;
                that.downloadBtnTextpuss = "导出名单";
                that.$message.error(response.msg);
                //
              } else {
                let blob = new Blob([response], {
                  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
                });
                that.downloadZippuss(blob);
              }
            })
            .catch(function (error) {
              that.downloadBtnLoadingpuss = false;
              that.downloadBtnTextpuss = "导出名单";
              console.log(error);
            });
        });
      }
    },

    // 下载
    downloadFileFnpuss: function (url) {
      return new Promise((resolve, reject) => {
        fetch(url, {
          mode: "cors",
        })
          .then((res) => res.blob())
          .then((blob) => {
            resolve(blob);
          })
          .catch((error) => {
            that.$message.error("网络错误");
            reject(error.toString());
          });
      });
    },
    // 下载打包
    downloadZippuss: function (excel) {
      let that = this;
      let upList = [];
      const zip = new JSZip();
      const promises = [];

      zip.file("报名名单.xlsx", excel);

      that.downloadMax = upList.length + 1;
      that.downloadNow = 0;
      Promise.all(promises).then(() => {
        zip
          .generateAsync({
            type: "blob",
          })
          .then((content) => {
            saveAs(content, "报名名单.zip");
            this.downloadBtnLoadingpuss = false;
            this.downloadBtnTextpuss = "导出名单";
          })
          .catch((error) => {
            that.$message.error("网络错误");
          });
      });
    },
  },
  mounted: function () {
    let h = this.$refs.page_body;
    // console.log(h);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    areaLisstLIN: function (newQuestion, oldQuestion) {
      for (let i = 0; i < this.area.length; i++) {
        if (newQuestion == this.area[i].department_id) {
          this.areaccname = this.area[i].department_name;
          // console.log(this.areaccname);
          this.ares = this.area[i].companys;
        }
      }
    },
  },
};
</script>
